<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/upload.css">
</head>
<body>
  <div class="container">
    <div class="item">
      <h3>单一文件上传【FORM-DATA】</h3>
      <section class="upload_box" id="upload1">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_btn_box">
          <button class="upload_btn select">选择文件</button>
          <button class="upload_btn upload" >上传服务器</button>
        </div>
        <div class="upload_tip">只能上传PNG/JPG/JPEG格式的图片，且大小不能超过2M</div>
        <ul class="upload_list">
          <!-- <li>
            <span>文件：${file.name}</span>
            <span><em>移除</em></span>
          </li> -->
        </ul>
      </section>
    </div>

    <div class="item">
      <h3>单一文件上传【base64】，只适合图片</h3>
      <section class="upload_box"  id="upload2">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_btn_box">
          <button class="upload_btn select">上传图片</button>
        </div>
        <div class="upload_tip">只能上传PNG/JPG/JPEG格式的图片，且大小不能超过2M</div>
      </section>
    </div>

    <div class="item">
      <h3>单一文件上传【缩略图处理】</h3>
      <section class="upload_box" id="upload3">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_btn_box">
          <button class="upload_btn select">选择文件</button>
          <button class="upload_btn upload" >上传服务器</button>
        </div>
        <div class="upload_tip">只能上传PNG/JPG/JPEG格式的图片，且大小不能超过2M</div>
        <ul class="upload_abbre">
          <img src="" alt="">
        </ul>
      </section>
    </div>
  </div>

  <div class="container">
    <div class="item">
      <h3>单一文件上传【进度管控】</h3>
      <section class="upload_box"  id="upload4">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_btn_box">
          <button class="upload_btn select">上传图片</button>
        </div>
        <div class="upload_progress">
          <div class="value"></div>
        </div>

      </section>
    </div>

    <div class="item">
      <h3>多文件上传</h3>
      <section class="upload_box" id="upload5">
        <input type="file" name="" id="" class="upload_inp" multiple>
        <div class="upload_btn_box">
          <button class="upload_btn select">选择文件</button>
          <button class="upload_btn upload" >上传服务器</button>
        </div>
        <ul class="upload_list">
          <!-- <li>
            <span>文件：${file.name}</span>
            <span><em>移除</em></span>
          </li> -->
        </ul>
      </section>
    </div>

    <div class="item">
      <h3>拖拽上传</h3>
      <section class="upload_box" id="upload6">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_drag">
          <svg t="1663851722431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" width="64" height="64"><path d="M1024 693.248q0 25.6-8.704 48.128t-24.576 40.448-36.864 30.208-45.568 16.384l1.024 1.024-17.408 0-4.096 0-4.096 0-675.84 0q-5.12 1.024-16.384 1.024-39.936 0-74.752-15.36t-60.928-41.472-40.96-60.928-14.848-74.752 14.848-74.752 40.96-60.928 60.928-41.472 74.752-15.36l1.024 0q-1.024-8.192-1.024-15.36l0-16.384q0-72.704 27.648-137.216t75.776-112.128 112.128-75.264 136.704-27.648 137.216 27.648 112.64 75.264 75.776 112.128 27.648 137.216q0 37.888-8.192 74.24t-22.528 69.12q5.12-1.024 10.752-1.536t10.752-0.512q27.648 0 52.736 10.752t43.52 29.696 29.184 44.032 10.752 53.76zM665.6 571.392q20.48 0 26.624-4.608t-8.192-22.016q-14.336-18.432-31.744-48.128t-36.352-60.416-38.4-57.344-37.888-38.912q-18.432-13.312-27.136-14.336t-25.088 12.288q-18.432 15.36-35.84 38.912t-35.328 50.176-35.84 52.224-36.352 45.056q-18.432 18.432-13.312 32.768t25.6 14.336l16.384 0q9.216 0 19.968 0.512t20.992 0.512l17.408 0q14.336 1.024 18.432 9.728t4.096 24.064q0 17.408-0.512 30.72t-0.512 25.6-0.512 25.6-0.512 30.72q0 7.168 1.536 15.36t5.632 15.36 12.288 11.776 21.504 4.608l23.552 0q9.216 0 27.648 1.024 24.576 0 28.16-12.288t3.584-38.912q0-23.552 0.512-42.496t0.512-51.712q0-23.552 4.608-36.352t19.968-12.8q11.264 0 32.256-0.512t32.256-0.512z" p-id="4696" fill="#bfbfbf"></path></svg>
          <span class="text">将文件拖到此处，或<a href="javascript:;" class="upload_submit">点击上传</a></span>
        </div>
        <div class="upload_mark">
          正在上传中，请稍后...
        </div>
      </section>
    </div>
  </div>

  <div class="container">
    <div class="item">
      <h3>大文件上传</h3>
      <section class="upload_box"  id="upload7">
        <input type="file" name="" id="" class="upload_inp">
        <div class="upload_btn_box">
          <button class="upload_btn select">上传图片</button>
        </div>
        <div class="upload_progress">
          <div class="value"></div>
        </div>
      </section>
    </div>
  </div>


  <script src="./node_modules/axios/dist/axios.min.js"></script>
  <script src="./node_modules/qs/dist/qs.js"></script>
  <script src="./node_modules/spark-md5/spark-md5.min.js"></script>
  <script src="./js/instance.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>
